<template>
  <div class="friend">
    <div class="friend-header clearfix">
      <div class="friend-header-title">动态</div>
      <div class="friend-header-con">
        <div class="friend-header-dynamic"><i class="el-icon-plus"></i>发动态</div>
        <div class="friend-header-follow el-icon-user"></div>
      </div>
    </div>
    <div class="friend-mian">
      <el-scrollbar>
        <div class="friend-mian-content">
          <ul>
            <li class="dynamic-list" v-for="(n,index) in 10" :key="index">
              <div class="dynamic-list-left">
                <div class="dynamic-list-photo"><img src="../../assets/img/loading.png" alt=""><i>V</i></div>
              </div>
              <div class="dynamic-list-right">
                <div class="dynamic-list-name">
                  <div class="dynamic-list-name-left">
                    <span>网易云音乐</span>
                    <span>分享单曲</span>
                  </div>
                  <div class="dynamic-list-name-right">
                    <span class="gz"><i class="el-icon-plus"></i>关注</span>
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        <i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>下一首播放</el-dropdown-item>
                        <el-dropdown-item>不感兴趣，减少这类推荐</el-dropdown-item>
                        <el-dropdown-item>不在显示推荐动态</el-dropdown-item>
                        <el-dropdown-item>举报</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
                <div class="dynamic-list-time">
                  11月24日
                </div>
                <div class="dynamic-list-text">
                  <p>据韩媒24日消息，歌手具荷拉在家中死亡，年仅28岁。</p>
                  <p>生前最后一条社交动态配文"晚安"。</p>
                  <p>《城市猎人》中傲娇任性的小公主，让多少人难忘。</p>
                  <p>欧尼晚安。</p>
                </div>
                <div class="dynamic-list-music">
                  <span>
                    <img src="../../assets/img/loading.png" alt="">
                    <i class="el-icon-caret-right"></i>
                  </span>
                  <span style="padding-left: 8px;">
                     <p>I Love U,I Want U,I Need U(Sweet Acoustic ver.)</p>
                     <p>具荷拉</p>
                  </span>
                </div>
                <div class="dynamic-list-img clearfix">
                   <span><img src="../../assets/img/loading.png" alt=""></span>
                   <span><img src="../../assets/img/loading.png" alt=""></span>
                   <span><img src="../../assets/img/loading.png" alt=""></span>
                </div>
                <div class="dynamic-list-zan">
                   <div>热门推荐</div>
                   <div>
                     <span><i class="el-icon-thumb"></i>( 9999 )</span>
                     <span>|</span>
                     <span><i class="el-icon-position"></i>( 9999 )</span>
                     <span>|</span>
                     <span><i class="el-icon-chat-line-square"></i>( 9999 )</span>
                   </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
  import {getFriendDynamic} from '@/api/api'
  export default {
    data() {
      return {
        friendlist:[]
      }
    },
    methods:{
      // 获取朋友动态
      _getfrienddynamic(){
        // getFriendDynamic().then(res=>{
        //   if(res.status==200){
        //     this.friendlist = res
        //     console.log(this.friendlist)
        //   }else{
        //     console.error("获取失败")
        //   }
        // })
      }
    },
    mounted(){
      this._getfrienddynamic();
    }
  }
</script>
<style scoped="scoped">
  .friend {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0px 28px;
  }

  .friend-header {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #E4E4E7;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .friend-header-title {
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: auto;
  }

  .friend-header-con {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .friend-header-follow {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cecfd4;
    border-radius: 50%;
  }

  .friend-header-dynamic {
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0px 5px;
    border-radius: 20px;
    border: 1px solid #cecfd4;
    font-size: 12px;
    margin-right: 8px;
    color: #333;
  }

  .friend-header-dynamic i {
    font-size: 14px;
    font-weight: bold;
    margin: 0px 5px;
    color: #b32a2b;
  }

  .friend-mian {
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .friend-mian-content {
    width: 990px;
    height: auto;
    margin: auto;
    padding-bottom: 60px;
  }

  .friend-mian-content ul>li {
    display: flex;
    border-bottom: 1px solid #efeff2;
    padding: 20px 0;
  }

  .dynamic-list .dynamic-list-left {
    width: 38px;
    height: auto;
  }

  .dynamic-list-photo {
    width: 38px;
    height: 38px;

    position: relative;
  }

  .dynamic-list-photo img {
    display: block;
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
  }

  .dynamic-list-photo i {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c22e2e;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-family: "agency fb";
  }

  .dynamic-list .dynamic-list-right {
    flex: 1;
    height: auto;
    padding-left: 10px;
  }

  .dynamic-list-right .dynamic-list-name {
    width: 100%;
    height: auto;
    display: flex;
    padding: 3px 0;
    align-items: center;
    justify-content: space-between;
  }
  .dynamic-list-right .dynamic-list-name .dynamic-list-name-left>span:nth-of-type(1){
    color: #1A5A99;
    font-weight: 600;
  }
  .dynamic-list-right .dynamic-list-name .gz{
    border: 1px solid #CECFD4;
    padding: 3px 5px;

  }
  .dynamic-list-right .dynamic-list-name .gz i{
    font-weight: bold;
    color: #B32A2B;
    margin-right: 5px;
  }
  >>>.el-dropdown-menu__item:hover{
    color: #B32A2B;
    background-color: #e6e6e6;
  }
  .dynamic-list-right .dynamic-list-time {
    width: 100%;
    display: flex;
    align-items: center;
    line-height: 16px;
    font-size: 12px;
    color: #999999;
  }

  .dynamic-list-right .dynamic-list-text {
    width: 100%;
    height: auto;
    line-height: 20px;
    color: #000;
    font-size: 14px;
    padding: 10px 0;
  }

  .dynamic-list-right .dynamic-list-music {
    width: 100%;
    height: auto;
    background-color: #f0f0f2;
    padding: 8px;
    display: flex;
    align-items: center;
  }
  .dynamic-list-right .dynamic-list-music span{
    display: block;
    overflow: hidden;
    position: relative;
  }
  .dynamic-list-right .dynamic-list-music img{
    display: block;
    width: 36px;
    height: 36px;
    overflow: hidden;
  }
  .dynamic-list-right .dynamic-list-music span p{
    line-height: 18px;
  }
  .dynamic-list-right .dynamic-list-music span:nth-of-type(2)>p:nth-of-type(2){
    color: #999;
  }
  .dynamic-list-right .dynamic-list-music span i{
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }

  .dynamic-list-right .dynamic-list-img {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
  }
  .dynamic-list-right .dynamic-list-img span{
    width: 120px;
    height: 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px;
  }
  .dynamic-list-right .dynamic-list-img span img{
    display: block;
    width: 100%;
  }

  .dynamic-list-right .dynamic-list-zan {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    color: #999;
    font-size: 12px;
  }
  .dynamic-list-right .dynamic-list-zan div{
    display: flex;
    align-items: center;
  }
  .dynamic-list-right .dynamic-list-zan span{
    margin-left: 10px;
    display: flex;
    align-items: center;
  }
  .dynamic-list-right .dynamic-list-zan span:nth-of-type(2n){
    color: #E4E4E7;
  }
  .dynamic-list-right .dynamic-list-zan span i{
    font-size: 15px;
    margin-right: 5px;
  }
</style>
